<template>
  <div v-loading="loading" style="width: 100%; height: 100%">
    <div v-if="queryParams.area === 1 || queryParams.area === 2">
      <div class="card-title">{{ fac1Title ? fac1Title : "创新中心一期能源费用" }}</div>
      <div>
        <MTable
          key="33333"
          :data="tableData1"
          :year="queryParams.year"
          type="USAGE"
          :columnList="T1ColumnList"
          :cellList="T1CellList"
          :cellTitle="T1CellTitle"
        />
      </div>
    </div>
    <div v-if="queryParams.area === 1 || queryParams.area === 3">
      <div class="card-title" :style="{ marginTop: queryParams.area === 3 ? 0 : '16px' }">
        {{ fac2Title ? fac2Title : "创新中心二期能源费用" }}
      </div>
      <div>
        <MTable
          key="4444"
          :data="tableData2"
          :year="queryParams.year"
          type="USAGE"
          :columnList="T2ColumnList"
          :cellList="T2CellList"
          :cellTitle="T2CellTitle"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance, watch } from "vue";
import MTable from "./mainTable.vue";
import { getTableDataAPI } from "@/api/energy/energyReport";

defineOptions({
  name: "ALL_ENERGY_ENERGYREPORT"
});

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => {}
  }
});

const state = reactive({
  loading: false,
  fac1Title: "",
  tableData1: [],
  T1ColumnList: [],
  T1CellList: [],
  T1CellTitle: "",
  fac2Title: "",
  tableData2: [],
  T2ColumnList: [],
  T2CellList: [],
  T2CellTitle: "",
  pageData: [],
  resObj: {}
});
const {
  loading,
  tableData1,
  T1ColumnList,
  T1CellList,
  T1CellTitle,
  tableData2,
  T2ColumnList,
  T2CellList,
  T2CellTitle,
  fac1Title,
  fac2Title,
  pageData
} = toRefs(state);

const { proxy } = getCurrentInstance();

onMounted(() => {
  handleQuery();
});
watch(
  () => props.queryParams.area,
  () => {
    handleQuery();
  },
  { deep: true }
);

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      timeFrame: props.queryParams.year,
      factoryType: props.queryParams.area || 1
    };
    const res = await getTableDataAPI(params);
    state.resObj = res;
    if (props.queryParams.area === 1) {
      if (res.money?.length) {
        state.pageData = res.money || [];
        let pageData = state.pageData;
        // 第一个表格的数据
        state.fac1Title = pageData?.[0]?.title || "";
        state.T1ColumnList = pageData?.[0]?.header?.filter(item => item !== "") || [];
        state.T1CellList = pageData?.[0]?.body?.map(item => item.ahead[1]) || [];
        state.T1CellTitle = pageData[0]?.body[0]?.ahead[0] || "";
        let contentData1 = pageData?.[0]?.body?.map(item => item.content) || [];
        let newAry1 = [];
        contentData1.forEach((i, idx1) => {
          let obj = {};
          state.T1ColumnList?.forEach((j, idx2) => {
            obj[state.T1ColumnList[idx2]] = contentData1[idx1][idx2];
          });
          newAry1.push(obj);
        });
        state.tableData1 = newAry1;
        // 第二个表格的数据
        state.fac2Title = pageData?.[1]?.title || "";
        state.T2ColumnList = pageData?.[1]?.header?.filter(item => item !== "") || [];
        state.T2CellList = pageData?.[1]?.body?.map(item => item.ahead[1]) || [];
        state.T2CellTitle = pageData?.[1]?.body[0]?.ahead[0] || "";
        let contentData2 = pageData?.[1]?.body?.map(item => item.content) || [];
        let newAry2 = [];
        contentData2.forEach((i, idx1) => {
          let obj = {};
          state.T2ColumnList?.forEach((j, idx2) => {
            obj[state.T2ColumnList[idx2]] = contentData2[idx1][idx2];
          });
          newAry2.push(obj);
        });
        state.tableData2 = newAry2;
      }
    }
    if (props.queryParams.area === 2) {
      if (res.money?.length) {
        state.pageData = res.money || [];
        let pageData = state.pageData;
        // 第一个表格的数据
        state.fac1Title = pageData?.[0]?.title || "";
        state.T1ColumnList = pageData?.[0]?.header?.filter(item => item !== "") || [];
        state.T1CellList = pageData?.[0]?.body?.map(item => item.ahead[1]) || [];
        state.T1CellTitle = pageData[0]?.body[0]?.ahead[0] || "";
        let contentData1 = pageData?.[0]?.body?.map(item => item.content) || [];
        let newAry1 = [];
        contentData1.forEach((i, idx1) => {
          let obj = {};
          state.T1ColumnList?.forEach((j, idx2) => {
            obj[state.T1ColumnList[idx2]] = contentData1[idx1][idx2];
          });
          newAry1.push(obj);
        });
        state.tableData1 = newAry1;
      }
    }
    if (props.queryParams.area === 3) {
      if (res.money?.length) {
        state.pageData = res.money || [];
        let pageData = state.pageData;
        // 第二个表格的数据
        state.fac2Title = pageData?.[0]?.title || "";
        state.T2ColumnList = pageData?.[0]?.header?.filter(item => item !== "") || [];
        state.T2CellList = pageData?.[0]?.body?.map(item => item.ahead[1]) || [];
        state.T2CellTitle = pageData?.[0]?.body[0]?.ahead[0] || "";
        let contentData2 = pageData?.[0]?.body?.map(item => item.content) || [];
        let newAry2 = [];
        contentData2.forEach((i, idx1) => {
          let obj = {};
          state.T2ColumnList?.forEach((j, idx2) => {
            obj[state.T2ColumnList[idx2]] = contentData2[idx1][idx2];
          });
          newAry2.push(obj);
        });
        state.tableData2 = newAry2;
      }
    }
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 导出
const handleExport = () => {
  //  const params = {
  //   year: props.queryParams.year.slice(-2),
  //   energyTableDataList: state.tableData1
  // };
  // proxy.download("post", "/energy/energyPredictionStatistics/exportExcelCost", params, "能源报表-用量.xlsx");
  let params = state.resObj;
  params.type = "quantity";
  proxy.download("post", "/energy/energyPredictionStatistics/exportEnergyTable", params, "能源报表-用量.xlsx");
};

defineExpose({
  handleQuery,
  handleExport
});
</script>

<style lang="scss" scoped>
.card-title {
  width: 346px;
  height: 31px;
  padding-left: 8px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 31px;
  color: #000;
  background: linear-gradient(270deg, rgb(59 130 246 / 0%) 0%, rgb(59 130 246 / 24%) 100%);
  border-left: 3px solid #3b82f6;
}
</style>
